@import "variables";

.menu {
  margin: 0;
  padding: 0;
  border-radius: $width-border-radius;
  border: $width-border solid $color-border;
  position: fixed;
  top: $size-base * 5;
  transform: scale(0);
  transition: transform 0.2s;
  transform-origin: top left;
  z-index: 10;
  background-color: $color-background;

  .divider {
    border-bottom: $width-border solid $color-border;
  }

  i {
    width: $size-base * 2.5;
  }

  a {
    display: block;
    padding: $width-gap-half/2 $width-gap;

    &:hover {
      color: $color-primary;
    }
  }
}

.menu-toggle-checkbox:checked ~ .menu {
  transform: scale(1);
  transform-origin: top left;
}